<template>
	<view class="container">
		<view class="deskBox">
			<view  class="list" :class="{'wktlist':desk.deviceState==1}" v-for="(desk,index) in dataList">
				<view class="name">
					<text>{{desk.name}}</text>
				</view>
				<view class="price">
					<text>￥</text>
					<text>{{desk.money}}元/小时</text>
				</view>
				<view class="BoxIndex">					
					<view class="number">
						<text>灯控编号:</text>
						<text>{{desk.lightingNumber}}</text>
					</view>
					<view class="icon">
						<text class="circle"></text>
						<text v-show="desk.deviceState==1">已开台</text>
						<text v-show="desk.deviceState==0">未开台</text>
						<text v-show="desk.deviceState==2">待结账</text>
					</view>
				</view>
				<view class="btnBox">
					<view class="right" @click="UpdateDesk(desk.id,desk.storeId)">
						<text>修改</text>
					</view>
				</view>
			</view>			
		</view>
		<!-- <view class="StoreBox">
			<view class="list" v-for="(desk,index) in dataList">
				<view class="top">
					<view class="imageBox">
						<image src="https://jkht.wteam.club/file/EF234FA3-5385-4F3E-BC2C-4847D3B1AB0D.jpg" mode="scaleToFill" class="image"></image>
					</view>
					<view class="detailsBox">
						<view class="name">							
							<view class="">
								<text>{{desk.name}}</text>
							</view>
							<view class="icon">
								<text class="circle"></text>
								<text v-show="desk.deviceState==1">已开台</text>
								<text v-show="desk.deviceState==0">未开台</text>
								<text v-show="desk.deviceState==2">待结账</text>
							</view>
						</view>
						<view class="BoxIndex">
							<view class="text">								
								<text>{{desk.deviceNumber}}</text>
							</view>
							<view class="number">
								<text>灯控编号:</text>
								<text>{{desk.lightingNumber}}</text>
							</view>
						</view>
						<view class="money">
							<view class="left">
								<view class="price">
									<text>￥</text>
									<text>{{desk.money}}元/小时</text>
								</view>
								
							</view>
							<view class="right" @click="UpdateDesk(desk.id,desk.storeId)">
								<text>修改</text>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view> -->
	</view>
</template>

<script>
	export default {
		data() {
			return {
				dataList: [],
			};
		},
		onShow() {
			this.getDeskList()
		},
		methods: {
			async getDeskList() {

				const token = uni.getStorageSync('token');
				const storeId = uni.getStorageSync('storeId')

				const {
					data: res
				} = await uni.$http.get(
					`/cashier/getCashierList?token=${token})&storeId=${storeId}`
				);
				if (res.code !== 0) return uni.$showMsg(res.message);
				console.log(res.data, '球桌列表');
				this.dataList=res.data;
			},
			UpdateDesk(id,storeId) {
				uni.navigateTo({
					url: `/subpkg/UpdateDesk/UpdateDesk?id=${id}&storeId=${storeId}`
				})
			},


		}
	}
</script>

<style lang="scss">
	.deskBox{
		width: 100%;
		// height: 85vh;
		display: flex;
		justify-content: space-around;
		flex-wrap: wrap;		
		overflow-y: auto;
		padding-bottom: 5vh;
		.wktlist{
			background-color: #fff !important;
			border: 8rpx solid #dce4e8 !important;
			.name{
				color: #0dfb1f !important;	
			}
			.price{
				color: #000000 !important;
			}
			.BoxIndex{				
				.number{					
					color:#000000 !important;
				}
				.icon {														
					color: #fba253 !important;					
				}
				
			}			
		}
		.list{
			width: 45%;
			height: 13vh;
			background-color: #009f53;
			border-radius: 30rpx;
			margin-top: 3vh;
			border: 8rpx solid #0dfb1f;
			.name{
				margin-top: 1vh;
				font-size: 30rpx;
				font-weight: 700;
				color: #fff;
				display: flex;
				justify-content: center;
				align-items: center;
			}
			.price{
				display: flex;
				justify-content: center;
				align-items: center;
				font-size: 24rpx;			
				font-weight: 700;
				color:#fff;
			}
			.BoxIndex{
				display: flex;
				justify-content: space-around;
				align-items: center;
				.number{
					font-size: 24rpx;
					font-weight: 700;
					color:#fff;
				}
				.icon {
					.circle {
						height: 15vw;
						width: 15vw;
						border-radius: 50%;
						background-color: #fff;
					}
				
					font-size: 25rpx;
					color: #0dfb1f;
					font-weight: 700;
				}
				
			}
			.btnBox{
				display: flex;
				justify-content: center;
				align-items: center;
				margin-top: 1vh;
			}
			.right{
				height: 3vh;
				width: 13vw;
				display: flex;
				justify-content: center;
				align-items: center;
				color: #fff;
				background-color: #00c164;
				border: 1rpx solid #00c164;
				border-radius: 20rpx;
				font-size: 27rpx;
			}
		}
		
	}
	
	
	
	.StoreBox {
		width: 100%;
		height: 85vh;
		display: flex;
		align-items: center;
		flex-direction: column;
		overflow-y: auto;
		padding-bottom: 5vh;

		.imageBox {
			width: 20vw;
			height: 20vw;
			margin: 2vw 0 0 2vw;
			border-radius: 20rpx;

			image {
				width: 100%;
				height: 100%;
				border-radius: 20rpx;
			}
		}

		.list {
			width: 95%;
			height: 15vh;
			background-color: #fff;
			border-radius: 30rpx;
			margin-top: 1vh;
			position: relative;

			.top {
				display: flex;
				min-height: 200rpx;
			}

			.BoxIndex {
				display: flex;
				justify-content: space-between;
				align-items: center;
				width: 500rpx;
				// top: -2vh;
				position: relative;
				font-size: 24rpx;
				font-weight: 700;
				height: 4vh;
				line-height: 4vh;
			}

			.money {
				font-size: 24rpx;
				margin-left: 3vw;
				font-weight: 700;
				display: flex;
				justify-content: space-between;
				align-items: center;				
				.right {
					height: 3vh;
					width: 13vw;
					display: flex;
					justify-content: center;
					align-items: center;
					color: #ff8d1a;
					border: 1rpx solid #ff8d1a;
					border-radius: 20rpx;
					font-size: 27rpx;
				}
			}

			.name {
				// font-weight: 700;
				font-size: 4.5vw;
				margin: 4vw 0 0 4vw;
				display: flex;
				justify-content: space-between;
				align-items: center;

				.icon {
					.circle {
						height: 15vw;
						width: 15vw;
						border-radius: 50%;
						background-color: #78c1ff;
					}

					font-size: 25rpx;
					color: #78c1ff;
					font-weight: 700;
				}
			}

			.text {
				margin: 0 0 0 4vw;
				// font-size: 3.5vw;
				// font-weight: 700;
				color: #7f746c;
			}


		}

	}

	.searchVip {
		margin-top: 1vh;
		display: flex;
		justify-content: center;
		align-items: center;
		background-color: #78c1ff;

		.search {
			width: 70% !important;
			border-radius: 10rpx !important;
		}
	}
</style>